/*
 * @Description: 二三维联动
 */

import BaseCommand from "@/core/Frame/BaseClass/BaseCommand";
import mapboxgl from "mapbox-gl";
import * as GlobeMap from "/public/mapearth";


class EarthMapboxAssociatingCommand extends BaseCommand {
  viewer: any;
  globeControl: any;
  globe: any;
  timer:any;
  constructor(params: any) {
    super();
    this.viewer = params.viewer;
    this.globeControl = this.viewer.getGlobeControl();
    this.globe = this.viewer.getGlobe();
  }

  execute(option: any) {
     let thatoption=option;
     const { PIE } = window;
     let earth=document.getElementById("earth");
     if(earth!=null){
         earth.style.display="flex";
         earth.style.width="100%";
         earth.style.height="100%";
     }
     let mapboxContainer=document.getElementById("mapboxContainer");
     if(mapboxContainer!=null){
         mapboxContainer.style.width= "50%";
         mapboxContainer.style.height= "100%";
     }
     let earthContainer=document.getElementById("earthContainer");
     if(earthContainer!=null){
         earthContainer.style.width= "50%";
         earthContainer.style.height= "100%";
     }

      mapboxgl.accessToken = "pk.eyJ1IjoicWlhbmt1bjIwMDgiLCJhIjoiY2p3eDEwb2pvMDYwczQ4cWl6aXp6NWlrbiJ9.tV8GupLEeydpxgbnyICPNQ";
      let map = new mapboxgl.Map({
          container: 'mapboxContainer',
          zoom: 0,
          center: [116.39, 39.91],
          style: {
              "version": 8,
              "name": "basemap",
              "metadata": {},
              "sources": {},
              "sprite": "",
              "layers": [],
              "id": "",
              "owner": ""
          },
      });

      map.on('load', function() {

          map.addLayer({
              "id": "google.tile",
              "type": "raster",
              "source": {
                  "type": "raster",
                  "tiles": ["https://webst03.is.autonavi.com/appmaptile?style=6&z={z}&y={y}&x={x}"],
                  "minzoom": 0,
                  "maxzoom": 22,
                  "tileSize": 256
              },
              "source-layer": "raster-google-tiles-layer",
          });

      });

      let scene2D = new GlobeMap.MapboxScene('mapboxContainer', map);
      let scene3D = new GlobeMap.EarthScene('earthContainer', this.globeControl);
      let sceneAssociating = new GlobeMap.SceneAssociating(scene2D, scene3D);

      this.globeControl.onSize();
      let that=this.globeControl;
      let canvas = window.owecanvas;
      canvas.addEventListener('mousedown',
          function (e:any) {
           if(e.button==2) {
               if(mapboxContainer!=null) {
                   mapboxContainer.style.width = "0%";
                   mapboxContainer.style.height = "0%";
               }
               if(earthContainer!=null) {
                   earthContainer.style.width = "100%";
                   earthContainer.style.height = "100%";
               }
               if(earth!=null){
                   earth.style="";
               }
               thatoption.checked =false;
               that.onSize();
           }
          },
          {passive: false}
      );
  }


  release() {
    const { globeControl } = this;
    const { PIE } = window;
    globeControl.setGlobeTool(PIE.GlobeToolType.Pan);
  }

  isEnable() {
    return true;
  }
}

export default EarthMapboxAssociatingCommand;
